<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,html{
				margin: 0;
			}
			body{
				background: #CDCDCD;
			}
			header{
				height: 50px;
				width: 100%;
				background: #333333;
			}
			.top{
				width: 600px;
				height: 100%;
				margin: 0 auto;
				line-height: 50px;
			}
			.top label{
				color: #fff;
				margin-right: 50px;
				font-size: 24px;
				vertical-align: bottom;
			}
			input{
				height: 25px;
				vertical-align: middle;
			}
			.box{
				width: 600px;
				margin: 0 auto;
			}
			h2{
				position: relative;
			}
			h2 span{
				position: absolute;
				top: 2px;
				right: 5px;
				display: inline-block;
				padding: 0 5px;
				height: 20px;
				border-radius: 20px;
				background: #E6E6FA;
				line-height: 22px;
				text-align: center;
				color: #666;
				font-size: 14px;
			}
			ul{
				padding: 0;
				list-style-type: none
			}
			ul li {
				position: relative;
				background: #fff;
				padding: 10px;
				margin-bottom: 5px;
			}
			.del{
				position: absolute;
				top: 2px;
				right: 5px;
				display: inline-block;
				width: 14px;
				height: 12px;
				border-radius: 14px;
				border: 6px double #FFF;
				background: #CCC;
				line-height: 14px;
				text-align: center;
				color: #FFF;
				font-weight: bold;
				font-size: 14px;
				cursor: pointer;
			}
			.check{
				height: 22px;
				width: 22px;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="top">
				<label>todolist</label>
				<input type="text" id="val" placeholder="添加ToDo" />
			</div>
		</header>
		<div class="box">
			<h2>正在进行<span id="todocount">0</span></h2>
			<ul id="todo"></ul>
			<h2>已经完成<span id="donecount">0</span></h2>
			<ul id="done"></ul>
		</div>
		<script>
			// 添加用到的事件 onkeydown
			// 1 数组方法 
			// 1.1 往数组最后以为添加用：push(数组元素)
			// 1.2 往数组前面添加用：unshift(数组元素)
			// 1.3 删除数组任意一个元素：splice(数组元素下标,数组元素的个数)
			// localStorage.setItem(属性名，属性值（只支持传字符串）)
			// JSON.parse() 把字符串转成对象
			// JSON.stringify() 把对象转成字符串
			var val = document.getElementById('val')
			var todo = document.getElementById('todo')
			var done = document.getElementById('done')
			var todolist = []
			window.addEventListener('load', function(){
				// 按回车添加数据
				document.addEventListener('keydown', function(e){
					e = e || window.e
					if (e.keyCode === 13) {
						todo.innerHTML = ''
						todolist.unshift({
							title: val.value,
							done: false
						})
						localStorage.setItem('todo', JSON.stringify(todolist))
						todolistFun()
						val.value = ''
					}
					
				})
				// 初始状态
				if (localStorage.getItem('todo')) {
					todolistFun()
				}
			})
			// 删除
			function liDel(e) {
				todo.innerHTML = ''
				todolist.splice(e,1)
				localStorage.setItem('todo', JSON.stringify(todolist))
				todolistFun()
			}
			// 封装赋值函数
			function todolistFun() {
				done.innerHTML = ''
				todo.innerHTML = ''
				var todocount = 0
				var donecount = 0
				var datas = JSON.parse(localStorage.getItem('todo'));
				todolist = datas
				for (var j = 0; j < todolist.length; j++) {
					if (todolist[j].done) {
						donecount++
						done.innerHTML += '<li><input type="checkbox" class="check" checked onchange="oncheck('+j+','+todolist[j].done+')" />'+
						 todolist[j].title +'<a class="del" onclick="liDel('+j+')">-</a></li>'
					} else {
						todocount++
						todo.innerHTML += '<li><input type="checkbox" class="check" onchange="oncheck('+j+','+todolist[j].done+')" />'+
						todolist[j].title +'<a class="del" onclick="liDel('+j+')">-</a></li>'
					}
				}
				todocount = document.getElementById('todocount').innerHTML = todocount
				donecount = document.getElementById('donecount').innerHTML = donecount
			}
			// 完成状态
			function oncheck(e,b) {
				console.log(e,b);
				todolist[e].done = !b
				localStorage.setItem('todo', JSON.stringify(todolist))
				todolistFun()
			}
		</script>
	</body>
</html>
